<template>
  <div class="chartone">
    <div id="piechart"></div>
    <div id="barchart"></div>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";

export default {
  name: "chartone",
  components: {},
  props: [],
  data() {
    return {};
  },
  computed: {},
  watch: {},
  mounted() {
    this.initPieChart();
    this.initBarChart();
  },
  beforeDestroy() {},
  methods: {
    initPieChart() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById("piechart"));
      let colors = ["#FF7C67", "#0FF9FF", "#BEC853", "#BEC853", "#7C6594"];
      // 指定图表的配置项和数据
      var option = {
        color: colors,
        tooltip: { trigger: "item", formatter: "{b}<br/>共{c}个&nbsp;({d}%)" },
        title: [
          {
            text: "企业总数",
            left: "49%",
            top: "40%",
            textAlign: "center",
            textBaseline: "middle",
            textStyle: { color: "#eeeeee", fontWeight: "normal", fontSize: 17 }
          },
          {
            text: 191,
            left: "49%",
            top: "55%",
            textAlign: "center",
            textBaseline: "middle",
            textStyle: { color: "#ffffff", fontWeight: "normal", fontSize: 30 }
          }
        ],
        series: [
          {
            hoverAnimation: false,
            radius: ["60%", "80%"],
            name: "pie",
            type: "pie",
            selectedMode: "single",
            selectedOffset: 16,
            clockwise: true,
            startAngle: 90,
            label: { normal: { show: false } },
            labelLine: { normal: { show: false } },
            itemStyle: {
              normal: { borderWidth: 3, borderColor: "#ffffff" },
              emphasis: {
                borderWidth: 0,
                shadowBlur: 5,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.2)"
              }
            },
            data: [
              { name: "信息技术", value: 71 },
              { name: "其它", value: 81 },
              { name: "建筑公司", value: 6 },
              { name: "机械电子", value: 27 },
              { name: "冶金化工", value: 4 },
              { name: "广告装饰", value: 1 },
              { name: "医药公司", value: 1 }
            ]
          }
        ]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    initBarChart() {
      var colors = ["#0FF9FF", "#FF7C67", "#FFFF59"];
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById("barchart"));

      // 指定图表的配置项和数据
      var option = {
        color: colors,
        title: {
          text: "全区企业年度统计",
          left: "center",
          textStyle: {
            color: "#FFAF51"
          }
        },
        tooltip: {
          trigger: "axis"
        },
        toolbox: {
          top: 10,
          left: 10,
          feature: {
            magicType: {
              show: true,
              type: ["line", "bar"]
            }
          }
        },
        legend: {
          top: 30,
          right: 0,
          orient: "vertical",
          data: ["总产值", "利润", "纳税额"],
          textStyle:{
            color: "rgba(255,255,255,0.8)"
          }
        },
        xAxis: {
          data: ["2015年", "2016年", "2017年"],
          axisLabel: {
            color: "rgba(255,255,255,0.8)"
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#474747'
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#474747'
            }
          }
        },
        yAxis: {
          axisLabel: {
            rotate: 60,
            color: "rgba(255,255,255,0.8)"
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#474747'
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#474747'
            }
          }
        },
        series: [
          {
            name: "总产值",
            type: "bar",
            data: [1031.6, 1152.9, 1404.1]
          },
          {
            name: "利润",
            type: "bar",
            data: [930.9, 981.2, 955.9]
          },
          {
            name: "纳税额",
            type: "bar",
            data: [883.4, 979.2, 1056.8]
          }
        ]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
@import "../css/rule.scss";
.chartone {
  background-color: rgba(0, 48, 64, 0.6) !important;
  border: 1px solid #73ffff !important;
  border-radius: 5px !important;
  width: 300px;
  height: calc(100% - 155px);
  position: absolute;
  left: 15px;
  top: 150px;
  #piechart {
    width: 100%;
    height: 40%;
  }
  #barchart {
    width: 100%;
    height: 60%;
  }
}
</style>


